<template>
  <div class="personal container">
    <div class="isShowone" v-if="flag">
      <div class="bg">
        <img id="bgimg" src="https://cdn.hterobot.com/vue/answer/image/login_bg%402x.png" />
      </div>
      <div class="inner">
        <div class="top">
          <h3>{{title}}</h3>
          <h6 v-if="flag">请认真填写以下信息以确保结果的准确性</h6>
        </div>
        <!-- <div class="isShowone" v-if="flag"> -->
        <div class="center">
          <input type="text" placeholder="请填写姓名" v-model="name" @keyup="getInputVal" />
          <input type="number" placeholder="请填写年龄" v-model.number="age" @keyup="getInputVal" />
          <input type="text" placeholder="请填写电话" v-model="phone" max="11" @keyup="getInputVal" />
        </div>
        <div class="bottom">
          <button @click="enter" :class="{active:color}">开始测试</button>
        </div>
        <!-- </div> -->
        <!-- <div class="isShowtwo" v-if="!flag" style="display:flex;justify-content:center">
              <button @click="enterTo" class="active" style="margin-top:120px;">开始测试</button>
        </div>-->
      </div>
    </div>
    <div class="isShowtwo" v-if="!flag" style="position:relative">
      <div class="bg">
        <img
          style="position:absolute;margin:25px 0 0 25px;"
          src="http://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/vue/wxhome/img/home_icon_logo.362f3764.png"
        />
        <img
          style="width:100%;height:100%"
          src="http://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/vue/answer/image/login2_bg@2x.png"
        />
      </div>
      <div style="display:flex;justify-content:center">
        <button
          @click="enterTo"
          class="active"
          style="position:absolute;bottom:85px;border-radius:20px"
        >开始测试</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "personal",
  data() {
    return {
      name: "",
      age: "",
      phone: "",
      personal: [],
      data: [],
      questionBank: [],
      color: false,
      flag: "",
      title: ""
    };
  },
  methods: {
    //按钮颜色改变
    getInputVal() {
      if (this.age == "" || this.age == "" || this.phone == "") {
        this.color = false;
      } else {
        this.color = true;
      }
    },
    enter() {
      if (this.name == "" || this.age == "" || this.phone == "") {
        this.$message({
          message: "请将信息填写完整",
          type: "warning"
        });
      } else {
        var obj = {};
        obj.name = this.name;
        obj.age = this.age;
        obj.phone = this.phone;
        this.personal.push(obj);
        localStorage.setItem("personal", JSON.stringify(this.personal));
        this.$router.push("/itemBank/1");
      }
    },
    enterTo() {
      var obj = {};
      obj.name = JSON.parse(localStorage.getItem("data")).username || "老用户";
      obj.age = 1;
      obj.phone = 1;
      this.personal.push(obj);
      localStorage.setItem("personal", JSON.stringify(this.personal));
      this.$router.push("/itemBank/1");
      // console.log(1);
    }
  },
  created() {
    var query = window.location.search;
    // console.log(query)
    var objData = query.split("?")[1];
    // console.log(objData)
    const arr = objData.split("&").map(v => {
      const data = v.split("=");
      let d = {};
      d[data[0]] = data[1];
      return d;
    });
    const obj = Object.assign(...arr);
    obj.state = obj.ID;
    // console.log(obj)
    this.data = obj;
    // this.openid=obj.openid
    localStorage.setItem("openid", JSON.stringify(obj.openid));
    localStorage.setItem("teachertextitembankid", JSON.stringify(obj.state));
    localStorage.setItem("data", JSON.stringify(this.data));
    // this.$store.commit('testanswer')

    this.axios({
      method: "post",
      url: "/v4/sys/getteachertextitembank",
      data: {
        ID: obj.state
      },
      xsrfCookieName: "csrfToken",
      xsrfHeaderName: "x-csrf-token"
    })
      .then(data => {
        // console.log(data)
        this.title = data.data.data.name;
        localStorage.setItem("title", JSON.stringify(this.title));
        if (data.data.data.info == 1) {
          this.flag = true;
        } else {
          this.flag = false;
        }
        this.bank = data.data.data.data;
        this.teachertextitembankid = data.data.data.ID;

        for (var i = 0; i < this.bank.length; i++) {
          this.bank[i].id = i + 1;
        }
        // console.log(this.bank)
        var arr1 = [];
        for (var j = 0; j < this.bank.length; j++) {
          var obj = {};
          obj.id = this.bank[j].id;
          obj.type = this.bank[j].type;
          obj.question = this.bank[j].text;
          obj.option = this.bank[j].data;
          arr1.push(obj);
        }
        this.questionBank = arr1;
        localStorage.setItem("questionBank", JSON.stringify(this.questionBank));
        // eslint-disable-next-line no-useless-escape
        document.title = this.title.replace(/\"/g, "");
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style scoped>
.active {
  background-color: #0090ff;
  color: #fff;
}
.container {
  padding: 0 !important;
}
.personal {
  height: 667px;
  background-color: #fff;
}
#bgimg {
  width: 100%;
}
.inner {
  width: 345px;
  height: 450px;
  background-color: #fff;
  margin: 0 auto;
  position: relative;
  top: -140px;
  border-radius: 8px;
  box-shadow: 0px 4px 10px #ccc;
  overflow: hidden;
  padding-left: 18px;
  box-sizing: border-box;
}
.inner .top {
  margin: 39px 0 0 0;
  color: #2e2e2e;
}
h3 {
  margin-bottom: 10px;
  font-size: 24px;
}
h6 {
  font-size: 10px;
}
.center {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
input {
  margin-bottom: 20px;
  width: 280px;
  height: 30px;
  outline: none;
  border: 0;
  border-bottom: 1px solid #eaeaea;
}
.bottom {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
button {
  width: 278px;
  height: 44px;
  background-color: #eee;
  font-size: 18px;
  color: #999;
  outline: none;
  border: 0;
  text-align: center;
  line-height: 44px;
}
</style>